Summary

Builds out a full "Apollo Wind > Patterns > Code Editors" documentation section covering how to compose Monaco and CodeMirror across the app. It also aligns every exported editor theme with the current apollo-core tokens, including the Future Light tokens promoted in #1204, and fixes several real bugs found along the way.

Rebased onto main after #1204. This PR is three commits:

1. fix(apollo-wind): align editor themes with apollo-core tokens
2. fix(apollo-react): disambiguate Node Property Panel editor story names
3. feat(storybook): build out the Code Editors pattern pages

Editor themes (@uipath/apollo-wind/editor-themes)

• Future token values: the Future Dark and Future Light Monaco/CodeMirror themes hardcoded Tailwind v3 hex, while apollo-core ships Tailwind v4 values for the same steps (for example zinc-400 #a1a1aa vs #9f9fa9, cyan-400 #22d3ee vs #00d3f2). Every Future value now uses the apollo-core hex for the step it already names, so syntax colors match the --code-* tokens exactly. Step choices are unchanged. Classic and HC themes already matched.
• Future Dark CodeMirror background: zinc-900 to zinc-800, matching Monaco. Future Light already matches at white via feat(apollo-core): promote Future Light theme tokens and consolidate UX Inventory docs #1204.
• Future Dark popups: suggest, hover, and widget backgrounds use surface-overlay (zinc-800) instead of zinc-950, the page background, matching Future Light. Selected suggest rows use background-selected in both Future themes.
• Suggest widget text, all six Monaco themes: none of the themes set suggest foregrounds, so Monaco fell back to its defaults. In Future Light that meant white text on the selected row (unreadable), and every theme used a stock blue match highlight in place of its own accent.
• Bracket pairs, all six Monaco themes: brackets used Monaco's default gold/orchid/blue colorization. They now use each theme's punctuation color, matching CodeMirror, with error-text for unexpected brackets.

New pages

• Editor Full / Editor Compact / Editor Input: reference layouts for full, compact, and mode-switching (text ⇄ code) editors.
• Editor Variables: binding a variable into an editor two ways, a VariablePicker "Insert" dropdown or typing $ in the editor. Covers both PromptEditor (ref-based insertVariableToken) and Monaco (cursor-position insert via editor.executeEdits, the same pattern used in NodePropertyPanel's panel composition stories).
• Layout Pattern: a canvas-panel example built on the shared FullWorkbenchComposition template, which gains an optional renderRightPanel prop so other pattern pages can supply their own panel. The panel header matches the other workbench panels (node icon, no header action). The expression takeover uses the same Modal + ModalContent variant="takeover" pattern as the shared node takeover (not the deprecated CanvasTakeoverModal), opens straight into fullscreen, and has Run in its header as a secondary button.

Bugs fixed along the way

• Monaco's TS diagnostics flagged undeclared identifiers in these illustrative snippets as errors. Semantic validation is disabled; syntax validation stays on so malformed code still surfaces. Monaco's TypeScript defaults are global, so the demo settings apply only while a demo editor is mounted and the previous defaults are restored when the last one unmounts; other stories keep their own diagnostics. Demo models now use a unique .tsx URI with JSX enabled, since the full sample is a React component and every JSX line was reported as a syntax error.
• LiveMonacoEditor forwarded value via defaultValue, so external updates to an already-mounted controlled editor were ignored. It is now controlled when a caller passes onChange and uncontrolled otherwise, so static samples can't reconcile a constant value over user edits. The Monaco input and Editor Variables demos keep their expression in state, so code-mode edits and inserted variables survive re-renders and mode switches. The CodeMirror editors (the input demo and LiveCodeMirrorEditor) rebuild their view on theme changes from the live document instead of the original sample or a keyed remount, so edits survive a theme switch.
• The Input Editor's lockable-field example had a fixed 84px editor inside a 36px input row, which covered the field label, and later a nested bordered box inside the borderless Future field. It now mounts Monaco borderless in the field's own row, like NodePropertyPanel's inline editor, with a placeholder in the same position and font as the built-in expression input. Its label goes through the label slot as a styled Label; a plain string rendered unstyled. The field's id, aria-*, and data-slot are forwarded to Monaco's focus element, and the editor is named via ariaLabel, so validation and InputGroup focus styling reach it. Clicking the field label focuses the editor, since a label can't activate Monaco's EditContext div.
• The Monaco and CodeMirror input demos forced a bg-surface-overlay fill (gray in Classic Light, unlike the default field) and had different code-mode treatments. Both now use the default InputGroup fill and share one code mode: header, no line numbers, wrapping, height, type size, and the Future field radius.
• CodeMirror's base styles overrode our theme font-family on .cm-content, so CodeMirror editors rendered in the browser's generic monospace font instead of Apollo's font stack. Fixes every CodeMirror instance in this file.
• Editor Full/Compact and the Themes page compared Monaco against CodeMirror at mismatched heights, since CodeMirror auto-sizes to its content. Both now share an explicit height.

Other changes

• Renamed Node Property Panel's "Editor Full" / "Editor Compact" / "Editor Inline" stories to "Panel: Full Editor" / "Panel: Compact Editor" / "Panel: Inline Editor". They collided in name with the new Code Editors pages, making both sets hard to tell apart in search and the sidebar.
• Added Patterns > [Layout Patterns, Code Editors] to Storybook's storySort so the new section has a stable sidebar position.
• Field Type guidance links its "LockableValueField, insert variable" section, plus the insert-variable and inline-autocomplete audit rows, to Code Editors: Editor Variables for the code editor implementation.
• Flow.stories.tsx: applied Biome's safe import-order fix, which was already failing on main.

Test plan

• biome check clean on all changed files
• turbo run typecheck clean for apollo-wind, apollo-react, storybook-app
• Verified in a running Storybook that Future Dark/Light editor colors resolve to the same hex as the live --code-*, surface-overlay, and background-selected tokens
• Opened Monaco autocomplete in all six themes: selected row text is readable and match highlights use the theme accent
• Zero Monaco error markers on every Code Editors page; a deliberately malformed line still reports a syntax error
• Layout Pattern renders on FullWorkbenchComposition and the expression takeover opens fullscreen, matching the shared node takeover
• Monaco TypeScript defaults are restored after leaving the Code Editors pages and re-applied on return
• Input Editor fields checked in Future Light and Classic Light: one outline per field, placeholder aligned with the value text, matching code modes
• Field Type guidance links resolve to the Editor Variables story

Follow-ups (separate PRs)

• --code-punctuation maps to foreground-disable (zinc-400) in Future Light, which is faint on white and collides with the comment color. The editor themes intentionally keep zinc-500.
• Text-mode fields render Apollo's font-mono while Monaco editors (including NodePropertyPanel's inline editor) use the system mono stack, so a value changes font when a field switches into code mode.
• Foundation color docs (foundation/colors.stories.tsx, foundation/Future/colors.ts, and a few others) still hardcode Tailwind v3 hex.

🤖 Generated with Claude Code